<template>

  <!-- ----------------------  顶部 ---------------------->
  <div class="topbox">
    <div class="logo">饿了么</div>
    <div class="info">
      <div class="mineimgbox">
        <div>
          <img src="" alt="">
        </div>
        <div class="zhanghao">
          <div class="name">68356352dfgshdv</div>
          <div class="phone">14727863337</div>
        </div>
      </div>
      <button>账户设置</button>
    </div>
  </div>

  <!-- --------------------------------------- yue ------------------------------- -->
  <div class="list">

    <div class="card">
      <div class="name">
        <div>吃货卡</div>
        <div>吃货豆:<span>1461</span></div>
      </div>
      <span>升级超级吃货卡,每月得无门槛红包,下单5倍返吃货豆</span>
    </div>

    <div class="hongbao">
      <div class="bag">
        <span>红包</span>
        <span>7张今日到期</span>
      </div>
      <div class="price">
        <span>余额</span>
        <span>0元</span>
      </div>
    </div>
    <!-- -------------------------------------- toolbox ------------------------------->
    <div class="toolbox">
      <div>常用工具</div>
      <div class="toollist">
        <div v-for="(item, index) in iconlist" :key="index" @click="changeStatus(item, index)"
          :class="{ checked: pindex == index }">
          <!-- <span :icon="item.icon"></span> -->
          <van-icon :name="item.icon" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- ---------------------- fuwuhao------------------------------- -->
    <div class="fuwuhaobox">
      <div class="one" v-for="(item, index) in list" :key="index">
        <div class="name">{{ item.name }}</div>
        <div class="disc">{{ item.disc }}</div>
        <div class="image"></div>
        <div class="action">{{ item.action }}</div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref } from 'vue'
var pindex = 0
var iconlist = ref([
  { id: 1, icon: "location-o", status: false, name: "我的地址" },
  { id: 2, icon: "service-o", status: false, name: "我的客服" },
  { id: 3, icon: "like-o", status: false, name: "店铺关注" },
  { id: 4, icon: "star-o", status: false, name: "评价有礼" },
])
var list = ref([
  { name: "邀好友赚佣金", disc: "最高得15元", pic: "", action: "去邀请" },
  { name: "饿了么服务号", disc: "关注后及时接收系统通知", pic: "", action: "立即关注" }

])

var changeStatus = (item, index) => { //更改任务状态, item参数就是 当前点击的任务对象
  this.pindex = index
  if (item.id == 1) {
    this.$router.push('/address/')
  } else if (item.id == 3) {
    this.$router.push('/favoritelist/')
  }
}

</script>
  
<style scoped>
.topbox {
  height: 15%;
  margin-bottom: 5px;
  background-color: #4294ed;
  padding: 10px;
  box-sizing: border-box;
}

.topbox .logo {
  font-weight: 700;
  letter-spacing: 3px;
}

.topbox .info {
  display: flex;
  justify-content: space-between;
}

.topbox .info>.mineimgbox {
  display: flex;
}

.topbox .info>.mineimgbox>div:first-child {
  width: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.topbox .info .mineimgbox .zhanghao .name {
  margin-bottom: 5px;
}

.topbox .info .mineimgbox .zhanghao .phone {
  font-size: 12px;
  color: grey;
}

.topbox .info button {
  font-size: 12px;
  height: 30px;
  padding: 5px;
  border: 1px solid lightgrey;
  background-color: white;
  border-radius: 14px;
}

/* ------------------------------------------------- */

.list {
  box-sizing: border-box;
  width: 100%;
}

.list .card {
  height: 70px;
  margin-bottom: 5px;
  background-image: linear-gradient(to right, #4294ed, #60c4f9);
  padding: 10px;
  border-radius: 10px;
}

.list .card .name {
  display: flex;
  align-items: center;
  padding: 5px;
}

.list .card .name div {
  padding: 0 8px;
  color: white;
}

.list .card .name div:nth-child(1) {
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  border-right: 2px solid #5da9f0;
}

.list .card .name div:nth-child(2)>span {
  font-size: 20px;
  font-weight: 700;
}

.list .card>span {
  font-size: 12px;
  color: #90d1f7;
}

.list .hongbao {
  height: 90px;
  margin-bottom: 5px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

.list .hongbao div {
  width: 50%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.list .hongbao .bag span:nth-child(1),
.price span:nth-child(1) {
  font-weight: 700;
  margin-bottom: 5px;
}

.list .hongbao .bag span:nth-child(2),
.price span:nth-child(2) {
  color: grey;
  font-size: 12px;
}

/* --------------------------------- tool ------------------------------- */
.toolbox {
  height: 130px;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

}

.toolbox>div:nth-child(1) {
  padding: 5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.toolbox .toollist {
  display: flex;
  justify-content: space-between;
}

.toolbox .toollist div {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.toolbox .toollist div span:nth-child(1) {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}

.toolbox .toollist div span:nth-child(2) {
  font-size: 14px;
}

.toolbox .toollist .checked {
  color: #4fadf0;
}

/* -------------------------------- fuwuhao ------------------ */
.fuwuhaobox {
  height: 200px;
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}


.fuwuhaobox .one {
  background-color: white;
  width: 46%;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
}

.fuwuhaobox .one div {
  margin-bottom: 10px;
}

.fuwuhaobox .one div:nth-child(1) {
  font-weight: 700;
}

.fuwuhaobox .one div:nth-child(2) {
  font-size: 12px;
  color: grey;
}

.fuwuhaobox .one div:nth-child(3) {
  height: 80px;
  background-color: lightgrey;
}

.fuwuhaobox .one div:last-child {
  width: 70px;
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 15px;
  font-size: 14px;
  text-align: center;
}
</style>